import * as React from "react";
import { StyleSheet, View } from "react-native";
import { Text, Button } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import { observer, inject } from "mobx-react";
import HomeStore from "../Model/HomeStore";
interface Props extends React.Props<any> {
  title: string;
  content: string;
  homeStore: HomeStore;
}

@inject("homeStore")
@observer
export default class PopView extends React.Component<Props> {
  constructor(props: Props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.container}>
        <Text h2 h2Style={{ fontSize: 20, textAlign: "center" }}>
          {this.props.title}
        </Text>
        <Text
          h4
          h4Style={{ fontSize: 15, textAlign: "center" }}
          style={styles.contentStyle}
        >
          {this.props.content}
        </Text>
        <Button
          icon={<Icon name="wrench" size={15} color="white" />}
          title="  Start Building"
          containerStyle={styles.buttonStyle}
          titleStyle={styles.titleStyle}
          buttonStyle={{ backgroundColor: "rgb(65,160,233)" }}
          onPressIn={() => {
            this.props.homeStore.isVisualPop = false;
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center"
  },
  titleStyle: {
    fontSize: 16
  },
  contentStyle: {
    marginTop: 20
  },
  buttonStyle: {
    marginTop: 20,
    width: "80%"
  }
});
